<template>
    <div>
        <Dialog v-model="dialogVisible1" title="邀约面试" width="620">
            <div class="message_p">
                <el-form ref="ruleFormRef" :model="state.form" label-width="120px" label-position="top" :rules="rules">
                    <div class="flex jcsb">
                        <el-form-item label="面试日期" prop="alltime">
                            <el-date-picker v-model="state.form.alltime" type="date" placeholder="面试日期"
                                style="width: 260px" format="YYYY-MM-DD" value-format="MM月DD日" clearable />
                        </el-form-item>
                        <el-form-item label="职位名称" prop="name">
                            <el-input v-model="state.form.name" placeholder="职位名称" type="text" style="width: 260px" />
                        </el-form-item>
                    </div>
                    <el-form-item label="签到时间" prop="qdtime">
                        <!-- <el-date-picker v-model="state.form.qdtime" type="datetimerange" start-placeholder="开始时间"
                            end-placeholder="结束时间" style="width: 260px" format="YYYY-MM-DD HH:mm"
                            value-format="YYYY-MM-DD_HH:mm:ss" clearable /> -->
                        <el-time-picker v-model="state.form.qdtime" is-range type="datetimerange"
                            start-placeholder="开始时间" end-placeholder="结束时间" style="width: 260px" format="HH:mm"
                            value-format="HH:mm" clearable />
                    </el-form-item>
                    <!-- <el-form-item label="考试时间" prop="kstime">
                        <el-date-picker v-model="state.form.kstime" type="datetimerange" start-placeholder="开始时间"
                            end-placeholder="结束时间" style="width: 100%" format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD:HH:mm:ss" clearable />
                    </el-form-item> -->
                    <el-form-item label="面试时间" prop="jztime">
                        <!-- <el-input v-model="state.form.jztime" placeholder="面试时间" type="text" /> -->
                        <!-- <el-select v-model="state.form.jztime" placeholder="面试时间"  filterable allow-create default-first-option size="large" style="width: 100%">
                            <el-option v-for="item in state.jztimeoptions" :key="item.label" :label="item.label"
                                :value="item.label" />
                        </el-select> -->
                        <el-time-picker v-model="state.form.jztime" type="datetime" placeholder="面试时间"
                            style="width: 100%" format="HH:mm" value-format="HH:mm" clearable />
                    </el-form-item>
                    <el-form-item label="面试地点" prop="location">
                        <el-input v-model="state.form.location" placeholder="面试地点" type="textarea" />
                    </el-form-item>
                    <el-form-item label="携带资料" prop="ziliao">
                        <el-input v-model="state.form.ziliao" placeholder="携带资料" type="textarea" />
                    </el-form-item>
                    <div class="flex jcsb">
                        <el-form-item label="是否回复" prop="">
                            <el-checkbox v-model="state.checked" label="是否回复" size="large" />
                        </el-form-item>
                        <el-form-item label="回复截至时间" prop="hftime" v-if="state.checked">
                            <el-date-picker v-model="state.form.hftime" type="datetime" placeholder="回复截至时间"
                                style="width: 100%" format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD_HH:mm"
                                clearable />
                        </el-form-item>
                    </div>
                    <el-form-item label="短信通知内容" prop="notices">
                        <el-input v-model="state.form.notices" disabled :autosize="{ minRows: 2 }" type="textarea"
                            placeholder="短信通知内容" />
                    </el-form-item>
                    <div class="flex jcfe aic" style="width: 100%;">
                        <el-button @click="DialogClose()">取消</el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    </div>
                </el-form>
            </div>
        </Dialog>
    </div>
</template>
<script lang="ts" setup>
import { dictSect } from "@/utils/dictUnit"
import { ref, reactive, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
const dialogVisible1 = ref(false)
const loading = ref(false)
const emit = defineEmits(['faceClick'])
const props = defineProps({
    faceData: {
        type: Object,
        default: () => {
            return {}
        }
    }

})
const state = reactive({
    jztimeoptions: [
        {
            label: "15min",
        }, {
            label: "30min",
        }, {
            label: "45min",
        }, {
            label: "60min",
        }, {
            label: "1h",
        }, {
            label: "2h",
        }
    ],
    notices1: "您好：现邀请您于____参加____的面试，具体安排如下：1、签到时间：____ - ____；2、面试时间：____ ；3、地点：____；4、需携带的资料：____。",
    notices2: "您好：现邀请您于____参加____的面试，具体安排如下：1、签到时间：____ - ____；2、面试时间：____ ；3、地点：____；4、需携带的资料：____。收到短信后，务必于____前进行回复，参加请回复1，放弃请回复2。退订请回复R。",
    form: {
        alltime: "",//时间
        qdtime: [],//签到时间
        kstime: "",//考试时间
        ziliao: "",//资料
        hftime: "",//回复
        name: "",//名称
        jztime: "",//截至时间
        location: "",//面试地点
        notices: "",
    } as any,
    checked: false,
    ruleForm: ["____", "____", "____", "____", "____", "____", "____"]
})
// 字典
// const getTypeListApi_ = () => {
//     state.options1 = dictSect("interview_type")
// }
// getTypeListApi_()
interface RuleForm {
    alltime: string
    name: string
    qdtime: []
    kstime: string
    jztime: string
    location: string
    ziliao: string
    hftime: string
}
const ruleFormRef = ref<FormInstance>()
const validateInputContent = (rule, value, callback) => {
    const regs = /^[^\s]*$/;  //空格 
    if (value === '') {
        callback(new Error('请输入内容'));
    } else if (!regs.test(value)) {
        callback(new Error('支持中文、英文、数字、符号'));
    } else {
        callback();
    }
};
const validateInputContents = (rule, value, callback) => {
    const regs = /^[^\s]*$/;  //空格 
    if (value === '') {
        callback(new Error('请输入内容'));
    } else if (!regs.test(value)) {
        callback(new Error('支持中文、英文、数字、符号'));
    } else {
        callback();
    }
};
const rules = reactive<FormRules<RuleForm>>({
    alltime: [{ required: true, message: '必选项', trigger: 'change' }],
    name: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 150, message: '长度限制1~150', trigger: 'blur' }, { validator: validateInputContent, trigger: 'blur' },],
    qdtime: [{ required: true, message: '请选择一个日期范围', trigger: 'change' }],
    kstime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 10, message: '长度限制1~10', trigger: 'blur' }, { validator: validateInputContent, trigger: 'blur' },],
    jztime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 20, message: '长度限制1~20', trigger: 'blur' }, { validator: validateInputContents, trigger: 'change' },],
    location: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 150, message: '长度限制1~150', trigger: 'blur' }, { validator: validateInputContent, trigger: 'blur' },],
    ziliao: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 150, message: '长度限制1~150', trigger: 'blur' }, { validator: validateInputContent, trigger: 'blur' },],
    hftime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 20, message: '长度限制1~20', trigger: 'blur' },
        // { validator: validateInputContent, trigger: 'blur' },
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let obj = {
                logName: state.checked ? "面试短信回复" : "面试短信",
                content: state.form.notices,
                param: state.ruleForm,
                templateId: state.checked ? "ee0041ac8fb740428cefedde98b6490c" : "4e452d9bfcc747faab1b8d6c37c8f12c"
            }
            emit('faceClick', obj)
        } else {
            console.log('error submit!', fields)
        }
    })
}
watch(() => state.checked, (newValue, oldValue) => {
    console.log("checked", state.checked);
    state.form.hftime = ""
    if (newValue) {
        state.ruleForm.push("____")
    } else {
        state.ruleForm.pop()
    }
    if (state.checked) {
        state.form.notices = `您好：现邀请您于${state.ruleForm[0]}参加${state.ruleForm[1]}的面试，具体安排如下：1、签到时间：${state.ruleForm[2]} - ${state.ruleForm[3]}；2、面试时间：${state.ruleForm[4]}；3、地点：${state.ruleForm[5]}；4、需携带的资料：${state.ruleForm[6]}。收到短信后，务必于${state.ruleForm[7]}前进行回复，参加请回复1，放弃请回复2。退订请回复R。`
    } else {
        state.form.notices = `您好：现邀请您于${state.ruleForm[0]}参加${state.ruleForm[1]}的面试，具体安排如下：1、签到时间：${state.ruleForm[2]} - ${state.ruleForm[3]}；2、面试时间：${state.ruleForm[4]}；3、地点：${state.ruleForm[5]}；4、需携带的资料：${state.ruleForm[6]}。`
    }
}, { deep: true })
watch(() => state.form, (newValue, oldValue) => {
    console.log("数据监听----", newValue);
    let obj = newValue
    if (obj.alltime) {
        state.ruleForm[0] = obj.alltime
    }
    if (obj.name) {
        state.ruleForm[1] = obj.name
    }
    if (obj.qdtime) {
        state.ruleForm[2] = obj.qdtime[0]
        state.ruleForm[3] = obj.qdtime[1]
    }
    // if (obj.kstime) {
    //     state.ruleForm[4] = obj.kstime

    // }
    if (obj.jztime) {
        state.ruleForm[4] = obj.jztime
    }
    if (obj.location) {
        state.ruleForm[5] = obj.location
    }
    if (obj.ziliao) {
        state.ruleForm[6] = obj.ziliao
    }
    if (state.checked && obj.hftime) {
        state.ruleForm[7] = obj.hftime
    }
    if (state.checked) {
        state.form.notices = `您好：现邀请您于${state.ruleForm[0]}参加${state.ruleForm[1]}的面试，具体安排如下：1、签到时间：${state.ruleForm[2]} - ${state.ruleForm[3]}；2、面试时间：${state.ruleForm[4]}；3、地点：${state.ruleForm[5]}；4、需携带的资料：${state.ruleForm[6]}。收到短信后，务必于${state.ruleForm[7]}前进行回复，参加请回复1，放弃请回复2。退订请回复R。`
    } else {
        state.form.notices = `您好：现邀请您于${state.ruleForm[0]}参加${state.ruleForm[1]}的面试，具体安排如下：1、签到时间：${state.ruleForm[2]} - ${state.ruleForm[3]}；2、面试时间：${state.ruleForm[4]}；3、地点：${state.ruleForm[5]}；4、需携带的资料：${state.ruleForm[6]}。`
    }

}, {
    deep: true, // 深度监听对象的变化（如果 count 是一个对象的话）  
});
const DialogOpen = () => {
    // positionListAllApi()
    state.form = {
        notices: "您好：现邀请您于____参加____的面试，具体安排如下：1、签到时间：____ - ____；2、面试时间：____ - ____（考试时间开始后，迟到____分钟者，不予进入考场）；3、地点：____；4、需携带的资料：____。"
    }
    state.checked = false
    dialogVisible1.value = true
}
const DialogClose = () => {
    dialogVisible1.value = false
}

// 暴露方法
defineExpose({
    DialogOpen,
    DialogClose
})
</script>
<style lang="less">
.el-dialog__header {
    padding: 10px;
    border-bottom: 1px solid #D8D8D8;
}

.el-dialog__body {
    padding: 20px;
}
</style>
<style lang="less" scoped>
.message_p {
    padding: 0px 10px 20px 10px;
}

.el-button {
    margin-top: 20px;
    width: 134px;
    height: 40px;
}
</style>